<template>
  <div class="warp">
    <TopBasic></TopBasic>
    <div class="card">
      <div class="card-title">
        <div class="line"></div>
        销售场所登记
        <div class="line"></div>
      </div>
      <div class="card-body">
        <button class="button" type="primary" @click="clickHandle" v-if="flag">
          登记新场所
        </button>
        <div v-if="!flag">
          <slot></slot>
        </div>
      </div>
    </div>
    <div class="card he2">
      <div class="card-title">
        <div class="line"></div>
        已登记场所列表
        <div class="line"></div>
      </div>
      <div class="card-body">
        <div class="cs-list">
          <div
            class="cs-d"
            v-for="item in csData"
            :key="item.wyid"
            @click="companyClick(item.wyid, item.dpmc)"
          >
            <div class="csd-left">{{ item.dpmc }}</div>
            <img :src="icon" class="image" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store/store";
import TopBasic from "@/components/Top";
import BasicInfo from "@/components/BasicInfo";
import { isEmpty } from "lodash";

export default {
  components: {
    TopBasic,
    BasicInfo
  },
  computed: {
    userId() {
      return store.state.userId;
    }
  },
  name: "index-main",
  data() {
    return {
      icon: require(`@/common/image/right-icon2.png`),
      flag: false,
      csData: []
    };
  },
  watch: {
    userId: function(val) {
      if (!isEmpty(store.state.userId)) {
        this.flag = true;
      } else {
        this.flag = false;
      }
      this.getData();
    }
  },
  methods: {
    clickHandle(ev) {
      const url = "/pages/login/index";
      this.mpvue.navigateTo({ url });
    },
    companyClick(id, name) {
      store.commit("setCompanyId", id);
      store.commit("setCompanyName", name);
      const url = "/pages/sellers/index";
      this.mpvue.navigateTo({ url });
    },
    getData(callback) {
      let url = store.state.server + "/company/getCompanyDatas";
      this.csData = [];
      this.mpvue.request({
        url: url,
        data: {
          dyuserid: store.state.userId
        },
        success: res => {
          const { data } = res;
          this.csData = data;
          if (callback != null) {
            callback.call(this);
          }
        },
        fail: error => {
          this.mpvue.alert({
            content: error.errorMessage
          });
          if (callback != null) {
            callback.call(this);
          }
        }
      });
    }
  },

  created() {
    if (!isEmpty(store.state.userId)) {
      this.flag = true;
    } else {
      this.flag = false;
    }
  },
  onShow() {
    this.getData();
    // `this` 指向 vm 实例
  }
};
</script>

<style scoped lang="scss">
@import "../common/common";

div {
  box-sizing: border-box;
}

.warp {
  display: flex;
  background-color: $contentTopBackgroundColor;
  min-height: 100vh;
  width: 100vw;
  padding: 20px;
  box-sizing: border-box;
  flex-direction: column;

  .card {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 2px 2px 6px rgba(149, 132, 132, 0.32);
    width: 100%;
    padding: 20px 20px;
    /*height: 140px;*/
    margin-bottom: 10px;

    .card-title {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #a0a0a0;
      margin-bottom: 10px;

      .line {
        width: 10px;
        border-bottom: 1px solid rgba(160, 160, 160, 0.49);
        margin: 0 2px;
      }
    }

    .card-body {
    }
  }

  .he2 {
    /*min-height: 207px*/
  }

  .cs-list {
    display: flex;
    flex-direction: column;

    .cs-d {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 13px 0;
      color: #000;
      border-bottom: 1px dashed rgba(0, 0, 0, 0.1);

      .csd-left {
        max-width: calc(100% - 30px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 15px;
        font-family: "Microsoft YaHei UI";
      }

      .image {
        width: 8px;
        height: 14px;
      }
    }

    .cs-d:last-child {
      /*border-bottom: 0*/
    }
  }
}
</style>
